<template>

    <div @click="handelHomeClick" class="homeView">


    <div class="blogList">
            <div class="title">
                <h1>博客博客</h1>
                <span>some word</span>
            </div>

            <SingPostPanel v-for="item in blogList" :blog="item" :key="item.id"/>
            <MyNavgation v-show="isShow" />
        </div>
        <!--        翻页导航栏-->


    </div>

</template>

<script>
    import SingPostPanel from "../components/SingPostPanel";
    import MyNavgation from "../components/MyNavgation";

    import axios from "axios";

    export default {
        components: {
            SingPostPanel,
          MyNavgation
        },
        // watch:{
        //     $route(to, from) {
        //         // 对路由变化作出响应...
        //         console.log(from)
        //         console.log(to)
        //     }
        //
        // },
        beforeRouteUpdate(to, from, next) {
          this.isShow = true
            console.log('routerUpdate')
            // console.log(to)
            // console.log(from)
            //路由变化 时的得到参数
            this.getBlogTag(to.query.blogTag)
          //初始化tag
          this.$store.commit('SetTag',to.query.blogTag)
          //刷新Home pageNum的数据
          this.$store.dispatch('InitHomeAsync')
          this.getPage(this.$store.state.tag)
            next()
        },

        data() {
            return {
                blogList:[],
                blogTag: 'all',
              isShow:true
                //博客到类型

            }
        },
        watch: {
            // $route(to , from){
            //     this.getBlogTag(from.query.blogTag)
            // },
            'blogTag'() {
                console.log('得到tag啦' + this.blogTag)
            }
        },
        methods: {
            getPage(tag){
              axios.defaults.withCredentials = true;
              axios.defaults.headers.post["Content-Type"] = "application/json;charset=utf-8";
              let postData = {
                page: this.pageNow,
                tag:tag
              }
              console.log('postData'+JSON.stringify(postData))
              axios.post('http://shilezhi.club:8082/Api/Blog/GetPage',JSON.stringify(postData)).then(
                  response=>{
                    console.log('home')
                    console.log(response.data)
                    this.blogList = response.data.blogList

                    
                  },
                  err=>{
                    console.log(err)
                      this.blogList= [{
                        content: `😜 后台没开啊哈哈哈哈哈！！！!@#$%^&*()_+!@#$%^&*()_+!@#$%^&*()_+~!@#$%^&*()_+~!@#$%^&*()_+!@#$%^&*()_+!@#$%^&*()_+!@#$%^&*()_+~!@#$%^&*()_+~!@#$%^&*()_+!@#$%^&*()_+!@#$%^&*()_+!@#$%^&*()_+~!@#$%^&*()_+~!@#$%^&*()_+!@#$%^&*()_+!@#$%^&*()_+!@#$%^&*()_+~!@#$%^&*()_+~!@#$%^&*()_+!@#$%^&*()_+!@#$%^&*()_+!@#$%^&*()_+~!@#$%^&*()_+~!@#$%^&*()_+!@#$%^&*()_+!@#$%^&*()_+!@#$%^&*()_+~!@#$%^&*()_+~!@#$%^&*()_+`,
                        createTime: '0000-00-00 00:00:00',
                        id: 1,
                        imgId: 'x',
                        tag: 'easygoing',
                        title: '没开后台呀！看个啥！',
                        updateTime: '0000-00-00 00:00:00',
                        userId: 1
                      }]
                  }
              )
            },
            handelHomeClick() {
                this.$EventBus.$emit('AsideOpen', 'HomeClick')
                console.log('Home点击')

            },
            toPage() {
                console.log('topage')
                this.$router.push({name: 'Home', params: {userId: '123'}})
            },
            getBlogTag(tag) {
                if (tag) {
                    this.blogTag = tag
                } else {
                    this.blogTag = 'all'
                }

            },
          searchBlog(keyWord){
              this.isShow = false
            axios.defaults.withCredentials = true;
            axios.defaults.headers.post["Content-Type"] = "application/json;charset=utf-8";
            let postData = {

              keyWord:keyWord
            }

            axios.post('http://shilezhi.club:8082/Api/Blog/SearchBlog',JSON.stringify(postData)).then(
                response=>{
                  this.blogList = response.data.blogList
                  if (!this.blogList)
                  {
                    this.$store.commit('InitHome',0)
                    this.blogList= [{
                      content: `😜!@#$%^&*()_+!@#$%^&*()_+!@#$%^&*()_+~!@#$%^&*()_+~!@#$%^&*()_+!@#$%^&*()_+!@#$%^&*()_+!@#$%^&*()_+~!@#$%^&*()_+~!@#$%^&*()_+!@#$%^&*()_+!@#$%^&*()_+!@#$%^&*()_+~!@#$%^&*()_+~!@#$%^&*()_+!@#$%^&*()_+!@#$%^&*()_+!@#$%^&*()_+~!@#$%^&*()_+~!@#$%^&*()_+!@#$%^&*()_+!@#$%^&*()_+!@#$%^&*()_+~!@#$%^&*()_+~!@#$%^&*()_+!@#$%^&*()_+!@#$%^&*()_+!@#$%^&*()_+~!@#$%^&*()_+~!@#$%^&*()_+`,
                      createTime: 'asd',
                      id: 8,
                      imgId: 'x',
                      tag: 'easygoing',
                      title: '没搜到东西',
                      updateTime: 'asd',
                      userId: 1

                    }]


                  }else
                  {
                    console.log(this.blogList.length)
                    this.$store.commit('InitHome',this.blogList.length)
                  }


                },
                err=>{
                  console.log(err)
                }
            )


          }
        },
        mounted() {
            //初始化在vuex中的pagenow和分页数
            this.$store.dispatch('InitHomeAsync')
          this.getPage(this.blogTag)
          this.$store.dispatch('InitAdminNameAsync')
            //
            // console.log(this.$route)
          this.$EventBus.$on('searchBlog',keyWord=>{
            this.searchBlog(keyWord)
          })
        },
        computed: {
            pageNow() {
                return this.$store.state.pageNow
            },
            pageNum() {
                return this.$store.state.pageNum
            }
        }


    }
</script>

<style scoped>

    @media screen and (max-width: 768px) {
        .title{
            padding:0.9375rem !important;
        }

        .homeView{
            padding:0.9375rem !important;
        }
    }


    @media screen and (max-width: 1200px)  and (min-width: 999px){
      .homeView{
        max-width: 50rem ;
      }

    }
    @media screen and (max-width: 1000px) and (min-width: 765px){
      .homeView{
        max-width: 33.625rem ;
      }
    }

    @media screen and (max-width: 700px) {
      .title {
        padding: 0.9375rem !important;
      }
      .homeView{
        max-width: 100vw ;
      }

    }










    .homeView{
        display: flex;
        box-sizing: border-box;
        /*padding: 1.25rem;*/
        /*background-color: pink;*/
        /*height: 3000px;*/
        /*width: calc(100% - 27.5rem);*/
        background-color: inherit;



    }



    .title{
        box-sizing: border-box;
        padding: 1.25rem;
    }
    .title h1{
        font-size: 2.25rem;
        color: black;
        line-height: 1.42857143;
        font-weight: 300;
    }
    .title span{
        font-size: 0.8125rem;
    }
    .blogList{
        width: 100%;
        box-sizing: border-box;
        /* padding: 1.25rem; */
        background-color: inherit;
        box-shadow: 0 1px 1px rgb(0 0 0 / 5%);
        /*background-color: yellow;*/
    }
    .testbox{
        width: 100%;
        height: 300px;
        background-color: green;
    }



</style>